<template>
  <div>
    <a-card :title="title">
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">序号</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px;text-align: center"
        :hoverable="false">基数</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">固定比例</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">固定比例基准额</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">每下幅额</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">每下幅增加额</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px; text-align: center"
        :hoverable="false">1</a-card-grid>
      <a-card-grid
        style="width: 10%;height: 80px;text-align: center"
        :hoverable="false">合同额</a-card-grid>
      <a-card-grid
        key="rate"
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 80%; top: -23px;text-align: left;">

            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentRate"
              placeholder="请输入固定比率(%)" />
          </div>
          <span v-show="!edit">{{ showRate(rate ? (rate * 100).toFixed(2) : undefined ) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        key="amount"
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 110%; top: -23px;text-align: left;">
            <!-- <div>请输入固定比例基准额(¥)</div>
            <div>当前值为{{ contrctAmount }}¥</div> -->
            <a-input-number
              :min="0"
              :precision="2"
              v-model="currentAmount"
              placeholder="请输入固定比例基准额(¥)" />
          </div>
          <span v-show="!edit">{{ showMonney(contrctAmount) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        key="step"
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 110%; top: -23px;text-align: left;">
            <!-- <div>请输入每下幅额(¥)</div>
            <div>当前值为{{ contrctStep }}¥</div> -->
            <a-input-number
              :min="0"
              :precision="2"
              v-model="currentContrctStep"
              placeholder="请输入每下幅额(¥)" />
          </div>
          <span v-show="!edit">{{ showMonney(contrctStep) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        key="bonusStep"
        @click="() => { editKey = 'bonusStep' }"
        style="width: 20%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style="left: -10px; width: 110%; top: -23px;text-align: left;">
            <!-- <div>请输入每下幅增加额(¥)</div>
            <div>当前值为{{ bonusStep }}¥</div> -->
            <a-input-number
              :min="0"
              :precision="2"
              v-model="currentBonusStep"
              placeholder="请输入每下幅增加额(¥)" />
          </div>
          <span v-show="!edit">{{ showMonney(bonusStep) }}</span>
        </div>
      </a-card-grid>
    </a-card>
  </div>
</template>
<script>
import { showRate, showMonney } from './config'

export default {
  name: 'MsgFee',
  components: {},
  props: {
    title: {
      type: String,
      default: () => ''
    },
    contrctAmount: {
      type: [Number, String],
      default: () => {}
    },
    rate: {
      type: [Number, String],
      default: () => {}
    },
    contrctStep: {
      type: [Number, String],
      default: () => {}
    },
    bonusStep: {
      type: [Number, String],
      default: () => {}
    },
    edit: {
      type: Boolean,
      default: () => false
    }
  },
  watch: {
    edit: function (edit) {
      if (edit) {
        this.currentRate = this.rate
        this.currentAmount = this.contrctAmount
        this.currentContrctStep = this.contrctStep
        this.currentBonusStep = this.bonusStep
      }
    }
  },
  data () {
    this.showMonney = showMonney
    this.showRate = showRate
    return {
      currentAmount: 0,
      currentRate: 0,
      currentContrctStep: 0,
      currentBonusStep: 0
    }
  },
  methods: {
    getValue () {
      /**
       * amount 基数
       * rate 比率
       * contrctStep 合同基准额
       * bonusStep 奖金幅度额
       */
      return {
        contrctAmount: this.currentAmount,
        rate: this.currentRate / 100,
        contrctStep: this.currentContrctStep,
        bonusStep: this.currentBonusStep
      }
    }
  }
}
</script>
